import React, { Component, Fragment } from 'react';
import TableCom from '@/components/TableCom';
import SearchHeader from '@/components/SearchHeader';
import DialogForm from '@/components/DialogForm';
@setTitle('用户管理')
export default class User extends Component {

	state = {
		search: {
			loading: false,
			form: [
				{
					type: 'select',
					label: '商户编号:',
					placeholder: '请选择商户编号',
					key: 'merchantCode',
					remote: true,
					options: []
				},
				{
					type: 'text',
					label: 'UID:',
					placeholder: '请输入UID',
					key: 'uid'
				},
				{
					type: 'text',
					label: '客户姓名:',
					placeholder: '请输入客户姓名',
					key: 'customerName'
				},
				{
					type: 'date',
					label: '时间:',
					placeholder: '请选择时间',
					key: 'dateTime'
				},
				{
					type: 'daterange',
					label: '时间:',
					key: 'daterange'
				},
				{
					type: 'select',
					label: '产品名称:',
					placeholder: '请选择产品名称',
					key: 'product',
					options: [
						{
							value: '选项1',
							label: '黄金糕'
						},
						{
							value: '选项2',
							label: '双皮奶'
						},
						{
							value: '选项3',
							label: '蚵仔煎'
						},
						{
							value: '选项4',
							label: '龙须面'
						},
						{
							value: '选项5',
							label: '北京烤鸭'
						}
					]
				}
			],
			operates: [
				{
					type: 'search',
					color: 'primary',
					icon: 'search',
					name: '查询'
				},
				{
					type: 'add',
					color: 'primary',
					icon: 'plus-circle',
					name: '新增'
				}
			]
		},
		tableColumns: [ // 表头
			{ title: '决策流编码', key: 'processCode' },
			{ title: '决策流名称', key: 'processName', event: { type: 0 } },
			{ title: '决策人', key: 'username' },
			{ title: '决策流描述', key: 'processDesc', ellipsis: true }
		],
		tableOperate: [ // 操作
			{ title: '提交审核', type: 0, color: 'warning', role: [] },
			{ title: '配置流程', type: 1, color: 'primary', role: [] },
			{ title: '查看线上', type: 2, color: '', role: [] },
			{ title: '编辑', type: 3, color: 'success', role: [] },
			{ title: '删除', type: 4, color: 'danger', role: [] },
			{ title: '版本下线', type: 5, color: 'warning', role: [] },
			{ title: '操作日志', type: 6, color: 'info', role: [] }
		],
		dialogForm: [
			{
				type: 'text',
				label: '决策流编码',
				placeholder: '请输入决策流编码',
				key: 'processCode',
				maxlength: 8,
				rules: [
					{ required: true, message: '请输入决策流编码' }
				]
			},
			{
				type: 'text',
				label: '决策流名称',
				placeholder: '请输入决策流名称',
				key: 'processName',
				maxlength: 10,
				rules: [
					{ required: true, message: '请输入决策流名称' }
				]
			},
			{
				type: 'date',
				placeholder: '请选择时间',
				label: '时间:',
				key: 'dateTime',
				rules: [{ required: true, message: '请选择时间' }]
			},
			{
				type: 'daterange',
				label: '时间:',
				key: 'daterange',
				rules: [{ required: true, message: '请选择时间' }]
			},
			{
				type: 'radio',
				label: '特殊资源:',
				placeholder: '请选择特殊资源',
				key: 'resource',
				options: [
					{
						value: 0,
						label: '线上品牌商赞助'
					},
					{
						value: 1,
						label: '线下场地免费'
					}
				],
				rules: [
					{ required: true, message: '请选择特殊资源' }
				]
			},
			{
				type: 'checkbox',
				label: '活动性质:',
				placeholder: '请选择活动性质',
				key: 'type',
				options: [
					{
						value: 0,
						label: '地推活动'
					},
					{
						value: 1,
						label: '线下主题活动'
					}
				],
				rules: [
					{
						required: true,
						message: '请选择活动性质',
					}
				]
			},
			{
				type: 'select',
				label: '产品名称:',
				placeholder: '请选择产品名称',
				key: 'product',
				options: [
					{
						value: '选项1',
						label: '黄金糕'
					},
					{
						value: '选项2',
						label: '双皮奶'
					},
					{
						value: '选项3',
						label: '蚵仔煎'
					},
					{
						value: '选项4',
						label: '龙须面'
					},
					{
						value: '选项5',
						label: '北京烤鸭'
					}
				],
				rules: [
					{ required: true, message: '请选择产品名称' }
				]
			},
			{
				type: 'textarea',
				label: '决策策流描述',
				placeholder: '请输入决策流描述',
				key: 'processDesc'
			}
		]
	}
	handlerSearch = (types, data) => {
		if (types.type == 'add') {
			DialogForm.service({
				config: {
					title: '新增'
				},
				disabledAll: false,
				dialogForm: this.state.dialogForm,
				handlerFn: this.handlerUpdate
			})
		} else {
			this.setState({
				search: {
					...this.state.search,
					loading: true,
				}
			}, () => {
				this.refs.tableCom.fetchData(
					{
						pageNum: 1,
						pageSize: 100
					},
					data,
					() => {
						this.setState({
							search: {
								...this.state.search,
								loading: false,
							}
						})
					}
				);
			})
		}

	}

	// 远程搜索数据处理
	searchRemoteMethod = (key, callback) => {
		callback([{ label: 1, value: 1 }]);
	}

	handlerTable = (event, data) => {
		console.log('表格点击', event, data);
	}

	// 操作项
	handlerOperate = (operateItem, data) => {
		console.log('操作点击', operateItem, data);
		switch (Number(operateItem.type)) {
			case 0:
				break;
			case 1:
				break;
			case 2:
				DialogForm.service({
					config: {
						title: '查看'
					},
					disabledAll: true,
					dialogForm: this.state.dialogForm,
					handlerFn: this.handlerUpdate
				})
				break;
			case 3:
				DialogForm.service({
					config: {
						title: '编辑'
					},
					disabledAll: false,
					dialogForm: this.state.dialogForm,
					handlerFn: this.handlerUpdate,
					result: {
						processCode: '000001',
						type: [0],
						resource: 0,
						product: "选项1"
					}
				})
				break;
			case 4:
			case 5:
				break;
			case 6:
				break;
		}
	}

	handlerUpdate = (parameMap, callback) => {
		console.log(parameMap);
		setTimeout(() => {
			callback();
		}, 3000);
	}

	render () {
		function username (props) {
			return <div>{props.username}</div>
		}


		function product (props) {
			return <span>插槽</span>
		}

		return (
			<Fragment>
				<SearchHeader
					product={product}
					search={this.state.search}
					searchRemoteMethod={this.searchRemoteMethod}
					handlerSearch={this.handlerSearch}>
				</SearchHeader>
				<TableCom
					ref='tableCom'
					url={'/getUserList'}
					username={username}
					operateWidth={550}
					handlerTable={this.handlerTable}
					handlerOperate={this.handlerOperate}
					tableColumns={this.state.tableColumns}
					tableOperate={this.state.tableOperate} >
				</TableCom>
			</Fragment>

		);
	}
}
